Skip to content

fix: remove dark theme from blabsy#449

Merged
coodos merged 1 commit intomainfrom
fix/blabsy-fix-to-dark-theme
Nov 17, 2025
Merged

fix: remove dark theme from blabsy#449
coodos merged 1 commit intomainfrom
fix/blabsy-fix-to-dark-theme

Conversation

@coodos
Copy link
Copy Markdown
Contributor

@coodos coodos commented Nov 17, 2025

Description of change

Issue Number

closes #448

Type of change

  • Fix (a change which fixes an issue)

How the change has been tested

Change checklist

  • I have ensured that the CI Checks pass locally
  • I have removed any unnecessary logic
  • My code is well documented
  • I have signed my commits
  • My code follows the pattern of the application
  • I have self reviewed my code

Summary by CodeRabbit

  • Features
    • Dark mode is now permanently enabled across the app.
    • Theme selection controls have been removed; users cannot switch to light mode.
    • Color accent customization remains available.
  • Bug Fixes / Content
    • Minor copy correction on the 404 page ("could not" instead of "couldn’t").

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Nov 17, 2025

Caution

Review failed

The pull request is closed.

Walkthrough

Theme selection and dynamic detection were removed; dark mode is now enforced everywhere (context, root Html, and UI). Theme-switching handlers, UI controls, and detection logic were replaced or simplified to always apply 'dark'.

Changes

Cohort / File(s) Change Summary
Theme context (logic & enforcement)
platforms/blabsy/src/lib/context/theme-context.tsx
Replaced dynamic initialization with a forced 'dark' initial theme; effects and handlers now always set and persist 'dark'; flipTheme() and changeTheme() force-add root.classList.add('dark') and do not toggle. CSS vars derived from a forced dark theme.
Modal UI (theme selector removed)
platforms/blabsy/src/components/modal/display-modal.tsx
Removed InputThemeRadio, Theme import, themes constant, and the Theme selection UI block; left color accent UI and Done button intact; added comment noting theme selection removal.
Pages — root & 404
platforms/blabsy/src/pages/_document.tsx, platforms/blabsy/src/pages/404.tsx
_document.tsx: added className='dark' to <Html> to force root dark class. 404.tsx: removed theme-context usage and dynamic isDarkMode computation; hardcoded isDarkMode = true and corrected SEO copy (“couldn't” → “could not”).
SEO type rename
platforms/blabsy/src/components/common/seo.tsx
Renamed internal prop type from MainLayoutProps to SEOProps and updated the SEO function signature accordingly; prop shape unchanged.

Sequence Diagram(s)

sequenceDiagram
  actor User
  participant App as App / Pages
  participant ThemeCtx as ThemeContext
  participant Root as document.documentElement
  rect rgb(230,245,255)
    Note over ThemeCtx: PREVIOUS FLOW (dynamic)
    ThemeCtx->>ThemeCtx: detect theme (localStorage / prefers-color-scheme / window)
    ThemeCtx->>Root: add/remove 'dark' class based on detected theme
    User->>ThemeCtx: request changeTheme(desired)
    ThemeCtx->>Root: toggle class per desired
  end

  rect rgb(245,235,245)
    Note over ThemeCtx: NEW FLOW (forced dark)
    ThemeCtx->>ThemeCtx: set initial theme = 'dark'
    ThemeCtx->>Root: root.classList.add('dark') (always)
    User->>ThemeCtx: request changeTheme(any)
    ThemeCtx->>Root: ensure root.classList.add('dark') (no toggle)
    App->>Root: _document renders with className='dark'
  end
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

  • Areas to focus review on:
    • platforms/blabsy/src/lib/context/theme-context.tsx — confirm no remaining branches that assume non-dark themes and that persistence/update calls consistently use 'dark'.
    • platforms/blabsy/src/components/modal/display-modal.tsx — ensure removed imports/variables are fully cleaned and no dangling references remain.
    • Root-level styling (_document.tsx) — verify no conflicting initialization elsewhere that might remove the dark class on hydration.

Possibly related PRs

Suggested reviewers

  • sosweetham
  • xPathin

Poem

"In burrows deep the rabbit grins,
Dark as velvet, no more skins,
Toggles gone, the night holds sway,
One soft theme to guide the way.
Hops and cheers — eternal midnight play. 🐰"

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The PR title clearly describes the main change: removing dynamic theme selection and fixing Blabsy to dark mode permanently.
Description check ✅ Passed The PR description follows the template structure with issue number, type of change marked, and a complete checklist, though testing details are empty.
Linked Issues check ✅ Passed The code changes comprehensively implement the linked issue #448 objective to permanently fix Blabsy theme to dark mode across all components.
Out of Scope Changes check ✅ Passed All changes are directly related to fixing the theme to dark mode; no out-of-scope modifications detected beyond the stated objective.

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 93346f9 and 7c03145.

📒 Files selected for processing (5)
  • platforms/blabsy/src/components/common/seo.tsx (2 hunks)
  • platforms/blabsy/src/components/modal/display-modal.tsx (2 hunks)
  • platforms/blabsy/src/lib/context/theme-context.tsx (3 hunks)
  • platforms/blabsy/src/pages/404.tsx (1 hunks)
  • platforms/blabsy/src/pages/_document.tsx (1 hunks)

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coodos coodos marked this pull request as ready for review November 17, 2025 12:11
@coodos coodos force-pushed the fix/blabsy-fix-to-dark-theme branch from 93346f9 to 7c03145 Compare November 17, 2025 12:15
Copy link
Copy Markdown
Contributor

@xPathin xPathin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚢

@coodos coodos merged commit 484e736 into main Nov 17, 2025
3 checks passed
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (6)
platforms/blabsy/src/pages/404.tsx (1)

5-6: 404 page dark-mode hardcoding is consistent with app-wide theme

The isDarkMode = true constant and passing it to withDarkMode keep the 404 page aligned with the globally forced dark theme, and the description copy tweak is fine. If you want to trim a tiny bit of indirection later, you could inline the boolean directly into the Error props and drop the constant, but it’s not necessary.

Also applies to: 12-12

platforms/blabsy/src/components/modal/display-modal.tsx (1)

5-5: Modal changes correctly reflect removal of theme selection

Importing only Accent matches the remaining usage, and the comment about theme selection being removed clearly documents that dark mode is enforced elsewhere. You might later adjust the modal text (“Customize your view”) to hint that only color accents are configurable now, but the current implementation is coherent with the PR’s goal.

Also applies to: 73-73

platforms/blabsy/src/lib/context/theme-context.tsx (4)

25-26: Initial theme hardcoded to dark is straightforward and safe

Always returning 'dark' from setInitialTheme cleanly matches the “permanent dark mode” requirement and avoids any window/storage checks on initialization. No issues here; if dark mode is truly permanent, you could eventually inline this and drop the separate helper to reduce indirection.


47-49: Effect re-enforcing dark theme on user changes is defensive but not strictly needed

Resetting theme to 'dark' whenever userId or userTheme changes guarantees consumers never see anything else, but given the initial state is already 'dark' and runtime switching is disabled, this effect is largely redundant. It’s fine to keep for safety; consider removing it later if you want to simplify the context.


56-67: Flip-theme effect correctly forces dark mode; some redundant work you can trim

The flipTheme effect now consistently:

  • Ensures the root element has the dark class.
  • Sets the dark variants of the main background/search/sidebar CSS variables.
  • Persists 'dark' to localStorage and updates the user theme via updateUserTheme.

That matches the PR objective and looks functionally sound. There are a couple of small cleanups you can make later to reduce redundancy:

  • root.classList.add('dark') followed by a classList.contains check that can only ever be true in single-threaded JS is effectively redundant.
  • The extra document.documentElement + root.classList.add('dark') after calling flipTheme() redoes what flipTheme already does.

A minimal refactor to remove that duplication could look like:

-        const flipTheme = (): NodeJS.Timeout | undefined => {
-            const root = document.documentElement;
-            // Always use dark theme
-            const forcedTheme: Theme = 'dark';
-            
-            // Always ensure dark class is present and never remove it
-            root.classList.add('dark');
-            // Prevent any accidental removal
-            if (!root.classList.contains('dark')) {
-                root.classList.add('dark');
-            }
+        const flipTheme = (): NodeJS.Timeout | undefined => {
+            const root = document.documentElement;
+            // Always use dark theme
+            const forcedTheme: Theme = 'dark';
+
+            // Ensure dark class is present
+            root.classList.add('dark');
@@
-        const timeoutId = flipTheme();
-        // Ensure dark class is always applied on mount and updates
-        const root = document.documentElement;
-        root.classList.add('dark');
-        
-        return () => clearTimeout(timeoutId);
+        const timeoutId = flipTheme();
+
+        return () => clearTimeout(timeoutId);

You could also optionally skip the updateUserTheme call when userTheme is already 'dark' to avoid unnecessary writes, but that’s an optimization rather than a correctness issue.

Also applies to: 68-81, 84-89, 94-100


125-128: changeTheme now ignores input and locks theme to dark

The changeTheme handler now discards the incoming value and always sets 'dark', which keeps the public context API stable while effectively disabling runtime theme switching. This is consistent with the rest of the forced-dark implementation. Longer term, you might either remove any UI that still calls changeTheme or rename/comment this handler to make its “no-op except enforcing dark” behavior explicit to future maintainers.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8b5682c and 93346f9.

📒 Files selected for processing (4)
  • platforms/blabsy/src/components/modal/display-modal.tsx (2 hunks)
  • platforms/blabsy/src/lib/context/theme-context.tsx (3 hunks)
  • platforms/blabsy/src/pages/404.tsx (1 hunks)
  • platforms/blabsy/src/pages/_document.tsx (1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
platforms/blabsy/src/lib/context/theme-context.tsx (1)
platforms/blabsy/src/lib/firebase/utils.ts (1)
  • updateUserTheme (64-70)
🔇 Additional comments (1)
platforms/blabsy/src/pages/_document.tsx (1)

5-5: Root Html dark class aligns with forced dark mode

Adding className='dark' on the Html root ensures dark styles are active from the first paint and matches the rest of the enforced dark-theme implementation. No issues here.

@coodos coodos deleted the fix/blabsy-fix-to-dark-theme branch November 17, 2025 12:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug] Blabsy on light mode doesn't look nice so permanently fix it to dark mode

3 participants